<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flexbox</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>

<div class="layout">
    <aside class="sidebar">
        <a href="#" class="logo">
            <img src="assets/images/logo.png" alt="Logo">
        </a>
        <nav class="navigation">
            <ul>
                <li class="navigation-item active">
                    <a href="#">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M23.0494 9.91071C22.4156 8.42843 21.5629 7.15184 20.4915 6.08019C19.4201 5.00874 18.1432 4.15612 16.6609 3.52223C15.1785 2.88835 13.6253 2.57133 12 2.57133C10.3749 2.57133 8.82138 2.88839 7.33928 3.52223C5.85718 4.15635 4.58041 5.00874 3.509 6.08019C2.43736 7.15184 1.58488 8.42843 0.950851 9.91071C0.316966 11.393 0 12.9464 0 14.5715C0 16.9106 0.629429 19.0672 1.88838 21.0404C2.05791 21.2993 2.29902 21.4287 2.61158 21.4287H21.3885C21.7009 21.4287 21.942 21.2993 22.1115 21.0404C23.3706 19.0583 24 16.9019 24 14.5715C24 12.9464 23.6832 11.393 23.0494 9.91071ZM10.7879 4.78799C11.1229 4.4531 11.5268 4.28563 12 4.28563C12.4733 4.28563 12.8772 4.45315 13.212 4.78799C13.5469 5.12268 13.7145 5.52676 13.7145 5.99998C13.7145 6.4732 13.5469 6.87714 13.212 7.21197C12.8772 7.54681 12.4733 7.71433 12 7.71433C11.5268 7.71433 11.1227 7.54681 10.7879 7.21197C10.4532 6.87709 10.2856 6.4732 10.2856 5.99998C10.2856 5.52676 10.453 5.12273 10.7879 4.78799ZM4.64069 15.7835C4.30585 16.1182 3.90177 16.2861 3.42855 16.2861C2.95547 16.2861 2.55139 16.1182 2.21656 15.7835C1.88167 15.449 1.71439 15.0447 1.71439 14.5715C1.71439 14.0983 1.88167 13.6944 2.21656 13.3595C2.55144 13.0246 2.95547 12.8572 3.42855 12.8572C3.90177 12.8572 4.30604 13.0246 4.64069 13.3595C4.97538 13.6944 5.14294 14.0983 5.14294 14.5715C5.14294 15.0447 4.97538 15.4486 4.64069 15.7835ZM7.21221 9.78349C6.87718 10.1183 6.47329 10.2858 6.00002 10.2858C5.52676 10.2858 5.12273 10.1181 4.78784 9.78349C4.45314 9.4488 4.28563 9.04472 4.28563 8.5715C4.28563 8.09828 4.45296 7.69434 4.78784 7.3595C5.12287 7.02462 5.52676 6.85715 6.00002 6.85715C6.47324 6.85715 6.87732 7.02467 7.21221 7.3595C7.5469 7.69439 7.71442 8.09828 7.71442 8.5715C7.71442 9.04458 7.54686 9.44861 7.21221 9.78349ZM14.799 9.89739L13.4462 15.0134C13.893 15.3168 14.2144 15.723 14.4109 16.2321C14.607 16.741 14.634 17.2634 14.4911 17.7991C14.3126 18.4866 13.9152 19.009 13.299 19.366C12.6829 19.7231 12.0312 19.8126 11.3436 19.6339C10.6562 19.4554 10.1337 19.0581 9.77669 18.442C9.41966 17.8257 9.33039 17.1741 9.50893 16.4864C9.65172 15.9509 9.93299 15.5112 10.3527 15.1676C10.7722 14.8237 11.2499 14.6297 11.7856 14.5849L13.1383 9.46883C13.2007 9.23672 13.3347 9.0602 13.5399 8.93964C13.7454 8.81932 13.9595 8.79028 14.1829 8.85272C14.4064 8.9153 14.5781 9.04688 14.6985 9.2477C14.8193 9.4488 14.8526 9.66528 14.799 9.89739ZM16.788 9.78349C16.4531 9.4488 16.2855 9.04472 16.2855 8.5715C16.2855 8.09828 16.4531 7.69434 16.788 7.3595C17.1229 7.02467 17.5268 6.85715 18 6.85715C18.4732 6.85715 18.8771 7.02467 19.212 7.3595C19.5469 7.69434 19.7145 8.09828 19.7145 8.5715C19.7145 9.04458 19.5469 9.44866 19.212 9.78349C18.8771 10.1183 18.4732 10.2858 18 10.2858C17.5268 10.2858 17.1229 10.1183 16.788 9.78349ZM21.7834 15.7835C21.4486 16.1182 21.0447 16.2861 20.5714 16.2861C20.0982 16.2861 19.6943 16.1182 19.3594 15.7835C19.0245 15.449 18.8571 15.0447 18.8571 14.5715C18.8571 14.0983 19.0245 13.6944 19.3594 13.3595C19.6943 13.0246 20.0982 12.8572 20.5714 12.8572C21.0447 12.8572 21.4486 13.0246 21.7834 13.3595C22.1183 13.6944 22.2856 14.0983 22.2856 14.5715C22.2856 15.0447 22.1183 15.4486 21.7834 15.7835Z"
                                  fill="white"/>
                        </svg>
                        <span>Dashboard</span>
                    </a>
                </li>
                <li class="navigation-item">
                    <a href="#">
                        <svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_2_27)">
                                <path d="M23.4353 9.60541L21.5907 9.20441C21.4303 8.71332 21.2316 8.23431 20.9971 7.77289L22.0182 6.18445C22.2006 5.90063 22.1605 5.52802 21.9221 5.28961L19.0485 2.41595C18.8101 2.17755 18.4374 2.13745 18.1536 2.31982L16.5652 3.341C16.1038 3.10645 15.6248 2.90778 15.1337 2.74738L14.7327 0.902771C14.6611 0.573181 14.3692 0.338074 14.0319 0.338074H9.96808C9.6308 0.338074 9.33893 0.573181 9.26733 0.902771L8.86633 2.74738C8.37524 2.90778 7.89624 3.10645 7.43481 3.341L5.84637 2.31982C5.56256 2.13745 5.18994 2.17755 4.95154 2.41595L2.07788 5.28961C1.83948 5.52802 1.79938 5.90063 1.98175 6.18445L3.00293 7.77289C2.76837 8.23431 2.5697 8.71332 2.4093 9.20441L0.564697 9.60541C0.235107 9.67719 0 9.96887 0 10.3062V14.37C0 14.7073 0.235107 14.999 0.564697 15.0707L2.4093 15.4717C2.5697 15.9628 2.76837 16.4418 3.00293 16.9033L1.98175 18.4917C1.79938 18.7755 1.83948 19.1481 2.07788 19.3865L4.95154 22.2602C5.18994 22.4986 5.56256 22.5387 5.84637 22.3563L7.43481 21.3351C7.89624 21.5697 8.37524 21.7684 8.86633 21.9288L9.26733 23.7734C9.33893 24.103 9.6308 24.3381 9.96808 24.3381H14.0319C14.3692 24.3381 14.6611 24.103 14.7327 23.7734L15.1337 21.9288C15.6248 21.7684 16.1038 21.5697 16.5652 21.3351L18.1536 22.3563C18.4374 22.5387 18.8101 22.4988 19.0485 22.2602L21.9221 19.3865C22.1605 19.1481 22.2006 18.7755 22.0182 18.4917L20.9971 16.9033C21.2316 16.4418 21.4303 15.9628 21.5907 15.4717L23.4353 15.0707C23.7649 14.999 24 14.7073 24 14.37V10.3062C24 9.96887 23.7649 9.67719 23.4353 9.60541ZM16.3028 12.3381C16.3028 14.7106 14.3725 16.6409 12 16.6409C9.6275 16.6409 7.6972 14.7106 7.6972 12.3381C7.6972 9.96558 9.6275 8.03528 12 8.03528C14.3725 8.03528 16.3028 9.96558 16.3028 12.3381Z"
                                      fill="white"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_2_27">
                                    <rect width="24" height="25.3977" fill="white" transform="translate(0 0.338074)"/>
                                </clipPath>
                            </defs>
                        </svg>
                        <span>Settings</span>
                    </a>
                </li>
                <li class="navigation-item">
                    <a href="#">
                        <svg width="23" height="25" viewBox="0 0 23 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_2_33)">
                                <path d="M18.1159 15.2898C17.6642 15.2898 17.3254 15.4093 16.9866 15.4093L13.7118 11.9438L16.422 9.07577L19.9227 7.76125L22.5199 3.33969C22.6329 3.10069 22.6329 2.74219 22.5199 2.62269L21.1648 1.18867C20.939 0.949664 20.6002 0.949664 20.3744 1.06917L16.0832 3.6982L14.7281 7.52225L12.0179 10.3903L8.96892 6.92474C8.96892 6.56624 9.08185 6.20773 9.08185 5.72973C9.08185 2.62269 6.25872 0.352156 3.43559 1.06917L5.12947 2.86169C6.03287 3.8177 6.03287 5.25172 5.12947 6.20773C4.22607 7.16374 2.87097 7.16374 1.96757 6.20773L0.160766 4.53471C-0.742634 8.00025 2.30634 11.3463 5.69409 10.2708L8.96892 13.7363L7.61382 15.1703C6.82335 14.9313 6.03287 15.1703 5.46824 15.7679L0.838317 20.6674C-0.0650837 21.6234 -0.178009 23.0574 0.612467 24.0135C1.51587 25.089 2.98389 25.089 3.88729 24.133L8.63015 19.1139C9.19477 18.5164 9.42062 17.5604 9.19477 16.8434L10.5499 15.4093L13.8247 18.8749C13.7118 19.2334 13.7118 19.7114 13.7118 20.0699C13.7118 23.1769 16.5349 25.4475 19.358 24.7305L17.6642 22.9379C16.7608 21.9819 16.7608 20.5479 17.6642 19.5919C18.5676 18.6359 19.9227 18.6359 20.8261 19.5919L22.5199 21.3844C23.3104 18.2774 21.0519 15.2898 18.1159 15.2898Z"
                                      fill="white"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_2_33">
                                    <rect width="22.6792" height="24" fill="white" transform="translate(0 0.900574)"/>
                                </clipPath>
                            </defs>
                        </svg>
                        <span>Control</span>
                    </a>
                </li>
                <li class="navigation-item">
                    <a href="#">
                        <svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M2 18.6278V0.637787H0V19.6861C0 19.9667 0.105357 20.2359 0.292893 20.4344C0.48043 20.6328 0.734784 20.7443 1 20.7443H24V18.6278H2Z"
                                  fill="white"/>
                            <path d="M9.00003 10.1619C9.00003 9.88127 8.89467 9.6121 8.70714 9.41364C8.5196 9.21519 8.26525 9.10369 8.00003 9.10369H5.00003C4.73481 9.10369 4.48046 9.21519 4.29292 9.41364C4.10539 9.6121 4.00003 9.88127 4.00003 10.1619V17.5696H9.00003V10.1619Z"
                                  fill="white"/>
                            <path d="M16 5.92898C16 5.64831 15.8946 5.37915 15.7071 5.18069C15.5196 4.98223 15.2652 4.87074 15 4.87074H12C11.7348 4.87074 11.4804 4.98223 11.2929 5.18069C11.1054 5.37915 11 5.64831 11 5.92898V17.5696H16V5.92898Z"
                                  fill="white"/>
                            <path d="M23 1.69603C23 1.41536 22.8946 1.1462 22.7071 0.947738C22.5196 0.74928 22.2652 0.637787 22 0.637787H19C18.7348 0.637787 18.4804 0.74928 18.2929 0.947738C18.1054 1.1462 18 1.41536 18 1.69603V17.5696H23V1.69603Z"
                                  fill="white"/>
                        </svg>
                        <span>Statistics</span>
                    </a>
                </li>
            </ul>
        </nav>
    </aside>
    <div class="content">
        <header class="header">
            <div class="header-search">
                <input type="text" placeholder="search for..." class="header-search-input">
                <button class="header-search-button">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_1_93)">
                            <path d="M9.68745 8.3076C11.368 5.93452 10.8059 2.64849 8.43286 0.968347C6.05978 -0.7118 2.77375 -0.150145 1.09361 2.22334C-0.586541 4.59642 -0.0248861 7.88204 2.3486 9.56219C4.0424 10.7614 6.28179 10.8537 8.06833 9.79866L11.9501 13.6572C12.3693 14.0984 13.0666 14.1161 13.5078 13.6969C13.949 13.2782 13.9667 12.5808 13.548 12.1396C13.5347 12.1256 13.5219 12.1127 13.5078 12.0995L9.68745 8.3076ZM5.38732 8.66732C3.51206 8.66772 1.99169 7.14856 1.99049 5.2733C1.99009 3.39804 3.50925 1.87767 5.38491 1.87687C7.25776 1.87607 8.77732 3.39282 8.78093 5.26567C8.78415 7.14133 7.26579 8.6641 5.38973 8.66732C5.38892 8.66732 5.38852 8.66732 5.38732 8.66732Z"
                                  fill="white"/>
                        </g>
                        <defs>
                            <clipPath id="clip0_1_93">
                                <rect width="14" height="14" fill="white"/>
                            </clipPath>
                        </defs>
                    </svg>
                </button>

                <div class="header-search-result">
                    <div class="header-search-result-item">First option</div>
                    <div class="header-search-result-item">Second option</div>
                    <div class="header-search-result-item">Third option</div>
                </div>
            </div>
            <div class="header-info">
                <div class="header-info-actions">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21.9287 20.243L20.2117 17.381C19.4187 16.06 18.9997 14.547 18.9997 13.007V10.5C18.9997 7.335 16.8877 4.65802 13.9997 3.795V2.00002C13.9997 0.897 13.1027 0 11.9996 0C10.8966 0 9.99962 0.897 9.99962 2.00002V3.795C7.11166 4.65802 4.99966 7.335 4.99966 10.5V13.007C4.99966 14.547 4.58064 16.059 3.78864 17.38L2.07166 20.242C1.97866 20.397 1.97664 20.589 2.06566 20.746C2.15467 20.903 2.31967 21 2.49967 21H21.4997C21.6797 21 21.8456 20.9031 21.9347 20.7471C22.0237 20.591 22.0207 20.397 21.9287 20.243Z"
                              fill="#B3B3B3"/>
                        <path d="M8.85071 22C9.41471 23.178 10.6087 24 11.9997 24C13.3906 24 14.5847 23.178 15.1487 22H8.85071Z"
                              fill="#B3B3B3"/>
                    </svg>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0.501018 4.46044C3.79492 7.25002 9.5747 12.1577 11.2735 13.688C11.5015 13.8945 11.7461 13.9995 12 13.9995C12.2534 13.9995 12.4976 13.8955 12.7251 13.6899C14.4253 12.1582 20.2051 7.25002 23.4991 4.46044C23.7041 4.28709 23.7354 3.98241 23.5694 3.77048C23.1856 3.28078 22.6133 3 22 3H2.00003C1.38677 3 0.814471 3.28078 0.430706 3.77053C0.264674 3.98241 0.29594 4.28709 0.501018 4.46044Z"
                              fill="#B3B3B3"/>
                        <path d="M23.71 5.97215C23.5327 5.88965 23.3242 5.91843 23.1768 6.04443C19.5239 9.14109 14.8618 13.1104 13.395 14.4321C12.5717 15.1753 11.4292 15.1753 10.604 14.4311C9.0405 13.0224 3.80512 8.57175 0.823219 6.04439C0.674766 5.91839 0.465797 5.89059 0.290016 5.9721C0.113297 6.05418 0 6.23095 0 6.42576V19C0 20.103 0.896953 21 2.00002 21H22C23.103 21 24 20.103 24 19V6.42576C24 6.23095 23.8867 6.05371 23.71 5.97215Z"
                              fill="#B3B3B3"/>
                    </svg>
                </div>
                <div class="header-info-user">
                    <span>Steve Kony</span>
                    <div class="header-info-user-image"></div>
                </div>
            </div>
        </header>
        <div class="container">
            <div class="commentators block">
                <div class="block-title">Best commentators</div>
                <div class="block-content">
                    <div class="commentator">
                        <img src="assets/images/face1.png" alt="Face one">
                        <div class="commentator-text">Sofia Grasy</div>
                    </div>
                    <div class="commentator">
                        <img src="assets/images/face2.png" alt="Face two">
                        <div class="commentator-text">Tonya Sass</div>
                    </div>
                    <div class="commentator">
                        <img src="assets/images/face3.png" alt="Face free">
                        <div class="commentator-text">Bob Charls</div>
                    </div>
                </div>
            </div>
            <div class="main-items">
                <div class="block">
                    <div class="block-title">Illustrations 1</div>
                    <div class="block-content">
                        Add some quality, svg illustrations to your project courtesy of unDraw, a constantly updated
                        collection of beautiful svg images that you can use completely free and without attribution! Add
                        some quality, svg illustrations to your project courtesy of unDraw, a constantly updated
                        collection of beautiful svg images that you can use completely free and without attribution! Add
                        some quality, svg illustrations to your project courtesy of unDraw, a constantly updated
                        collection of beautiful svg images.
                    </div>
                </div>
                <div class="block">
                    <div class="block-title">Illustrations 2</div>
                    <div class="block-content">
                        Add some quality, svg illustrations to your project courtesy of unDraw, a constantly updated
                        collection of beautiful svg images that you can use completely free and without attribution! Add
                        some quality, svg Сompletely free and without attribution! Add some quality, svg illustrations
                        to your project courtesy of unDraw, a constantly updated collection of beautiful svg images.
                    </div>
                </div>
                <div class="block">
                    <div class="block-title">Illustrations 3</div>
                    <div class="block-content">
                        Сompletely free and without attribution! Add some quality, svg illustrations to your project
                        courtesy of unDraw, a constantly updated collection of beautiful svg images that you can use
                        completely free and without attribution! Add some quality, svg illustrations to your project
                        courtesy of unDraw, a constantly updated collection of beautiful svg images. Draw, a constantly
                        updated collection of beautiful svg images.
                    </div>
                </div>
                <div class="block">
                    <div class="block-title">Illustrations 1</div>
                    <div class="block-content">
                        Add some quality, svg illustrations to your project courtesy of unDraw, a constantly updated
                        collection of beautiful svg images that you can use completely free and without attribution! Add
                        some quality, svg illustrations to your project courtesy of unDraw, a constantly updated
                        collection of beautiful svg images that you can use completely free and without attribution! Add
                        some quality, svg illustrations to your project courtesy of unDraw, a constantly updated
                        collection of beautiful svg images.
                    </div>
                </div>
                <div class="block">
                    <div class="block-title">Illustrations 2</div>
                    <div class="block-content">
                        Add some quality, svg illustrations to your project courtesy of unDraw, a constantly updated
                        collection of beautiful svg images that you can use completely free and without attribution! Add
                        some quality, svg Сompletely free and without attribution! Add some quality, svg illustrations
                        to your project courtesy of unDraw, a constantly updated collection of beautiful svg images.
                    </div>
                </div>
                <div class="block">
                    <div class="block-title">Illustrations 3</div>
                    <div class="block-content">
                        Сompletely free and without attribution! Add some quality, svg illustrations to your project
                        courtesy of unDraw, a constantly updated collection of beautiful svg images that you can use
                        completely free and without attribution! Add some quality, svg illustrations to your project
                        courtesy of unDraw, a constantly updated collection of beautiful svg images. Draw, a constantly
                        updated collection of beautiful svg images.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>